<template>
  <view class="order-info">
    <!-- 顶部滚动栏 -->
    <scroll-view scroll-x class="top-scroll" show-scrollbar="false">
          <view class="top-tab" :class="{ active: currentFilter === 'all' }" @tap="filterOrders('all')">
            <text>全部</text>
          </view>
          <view class="top-tab" :class="{ active: currentFilter === 'pending' }" @tap="filterOrders('pending')">
            <text>待接单</text>
          </view>
          <view class="top-tab" :class="{ active: currentFilter === 'accepted' }" @tap="filterOrders('accepted')">
            <text>已接单</text>
          </view>
          <view class="top-tab" :class="{ active: currentFilter === 'ongoing' }" @tap="filterOrders('ongoing')">
            <text>进行中</text>
          </view>
          <view class="top-tab" :class="{ active: currentFilter === 'pendingPayment' }" @tap="filterOrders('pendingPayment')">
            <text>待支付</text>
          </view>
          <view class="top-tab" :class="{ active: currentFilter === 'completed' }" @tap="filterOrders('completed')">
            <text>已完成</text>
          </view>
          <view class="top-tab" :class="{ active: currentFilter === 'canceled' }" @tap="filterOrders('canceled')">
            <text>已取消</text>
          </view>
        </scroll-view>

    <!-- 订单列表 -->
    <view class="order-list">
		<view v-for="order in filteredOrders" :key="order.id" class="order-item">
			<view class="order-header">
				<text class="company-name">无忧出行</text>
				<text class="order-status" :style="{ color: getOrderStatusColor(order.orderStatus) }">{{ getOrderStatusText(order.orderStatus) }}</text>
				<text class="order-price" v-if="order.orderStatus == 8 || order.orderStatus == 7">{{ order.price }} 元</text>
				<text class="iconfont icon-jinru icon-image" @tap="goToOrderDetail(order.id)" ></text>
			</view>
			<view class="order-details">
				<view class="order-date">
					<text>{{ order.orderTime }}</text>
				</view>
				<view class="route">
					<view class="start">
					    <text>{{order.departure}}</text>    
					</view>
					<view class="end">  
						<text>{{order.destination}}</text>
					</view>
				</view>
			</view>
		</view>
    </view>
  </view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { ApiGetAllOrderInfo } from '../api/order';
	import { onShow } from '@dcloudio/uni-app';
	import { HandleApiError, ShowToast, ShowLoading, HideLoading} from '../utils';
	
	const orders = ref([]); // 从后端获取的所有订单数据
	const currentFilter = ref('all'); // 当前选择的订单状态
	
	onShow(() => {
	    // 在页面每次显示时调用 ApiGetAllOrderInfo 获取所有订单信息
	    fetchAllOrders();
	});
	
	const fetchAllOrders = async () => {
	    const { error, result } = await ApiGetAllOrderInfo();
		if(!HandleApiError(error) && !result.hasOwnProperty("code")){
			orders.value = result;
		}
	};
	
	const filteredOrders = computed(() => {
	  if (currentFilter.value === 'all') {
	    return orders.value;
	  } else {
	    const filterStatus = getOrderStatusValue(currentFilter.value);
	    if (Array.isArray(filterStatus)) {
	      return orders.value.filter(order => filterStatus.includes(order.orderStatus));
	    } else {
	      return orders.value.filter(order => order.orderStatus === filterStatus);
	    }
	  }
	});
	
	const filterOrders = (status) => {
	  currentFilter.value = status;
	};
	
	const getOrderStatusText = (status) => {
	  switch (status) {
	    case 1: return '待接单';
	    case 2: return '已接单';
	    case 3:
	    case 4:
	    case 5:
	    case 6: return '进行中';
	    case 7: return '待支付';
	    case 8: return '已完成';
	    case 9: return '已取消';
	    default: return '订单无效';
	  }
	};
	
	const getOrderStatusValue = (text) => {
	  switch (text) {
	    case 'pending': return 1;
	    case 'accepted': return 2;
	    case 'ongoing': return [3, 4, 5, 6];
	    case 'pendingPayment': return 7;
	    case 'completed': return 8;
	    case 'canceled': return 9;
	    default: return 0;
	  }
	};
	
	const getOrderStatusColor = (status) => {
	  switch (status) {
	    case 1: 
	    case 2: 
	    case 3:
	    case 4:
	    case 5:
	    case 6: 
	    case 7: 
	      return '#19c235';
	    case 8: 
	      return '#5b6ef7'; 
	    case 9: 
	      return '#f35f5f'; 
	    default:
	      return '#f35f5f';
	  }
	};
	
	const goToOrderDetail = (orderId) => {
	  // 跳转到订单详情页，你需要根据实际情况进行修改
	  uni.navigateTo({
	    url: '/pages/orderDetail?orderId=' + orderId
	  });
	};

</script>
<style lang="scss" scoped>
	.order-info{
		width: 100%;
	}
	.top-scroll {
		padding: 0 10px;
	    white-space: nowrap; 
		background-color: white;
	}
	
	.top-tab {
		height:80rpx;
		line-height: 80rpx;
		display: inline-block;
	    padding: 0rpx 24rpx;
	    font-size: 32rpx; 
	    color: #888; 
	    cursor: pointer;
	}

	.top-tab.active {
		color: #f0ad4e;
		border-bottom: 4rpx solid #f0ad4e;
	}
	
	scroll-view ::-webkit-scrollbar {
	    display:none;
    }

	.order-list {
		height: 100%;
		width: 100%;
		overflow-x: hidden !important;
	}
	.order-list ::-webkit-scrollbar {
		display: none;
	}

	.order-item {
		border: 1px solid #cccccccf;
		margin: 10px;
		padding: 10px 20px;
		border-radius: 10px;
		background-color: white;
	}

	.order-header {
		position: relative;
		height:80rpx;
		line-height: 80rpx;
	}

	.company-name {
		font-size: 35rpx;
		color: #333;
		font-weight: bold;
	}

	.order-status {
		margin-left: 30rpx;
		font-size: 22rpx;
		color: #ccc;
		font-weight: bold;
		padding: 5rpx;
		border-radius: 5rpx;
		background-color: #88888829;
	}

	.order-price {
		position: absolute;
		right: 50rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.icon-image {
		position: absolute;
		right: 0rpx;
		cursor: pointer;
	}

	.order-date {
		font-size: 14px;
		color: #777;
	}
	.route{
		color: #666;
		font-size: 26rpx;
		margin-top: 10px;
	}
	.start{
	    height: 50rpx;
		font-weight: 550;
	    display: flex;
	    align-items: center;
	    &::before{
	        display: block;
	        content: '';
	        width: 20rpx;
	        height: 20rpx;
	        border-radius: 50%;
	        background: #19c235;
	        margin-right: 10px;
	    }
	}
	
	.end{
	    height: 50rpx;
	    display: flex;
		font-weight: 550;
	    align-items: center;
	    &::before{
	        display: block;
	        content: '';
	        width: 20rpx;
	        height: 20rpx;
	        border-radius: 50%;
	        background: #f0ad4e;
	        margin-right: 10px;
	    }
	}
</style>
